@charset "utf-8";
@import "./variables";
/**
 * 全局Reset
 * 重置Mobile及高级浏览器上常见的差异
 */

// 1. 将元素的盒模型统一为: border-box
// 2. 清除元素tap时出现的焦点框
*,
::before,
::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// 1. 隐藏页面滚动条
::-webkit-scrollbar {
  display: none;
}

// 1. 防止用户自定义网页背景及文字颜色、大小影响
// 2. 禁止选中文本
html {
  background-color: #ffffff;
  color: #333;
}

// 1. 清除body的默认margin
// 2. 定义页面的默认字号
// 3. 定义页面的默认行高
// 4. 定义页面的默认字体
body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  background-color: #ffffff;
  box-sizing: border-box;
}

// 1. 清除某些元素在不同浏览器下内外补白不同造成的影响
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td,
pre,
xmp {
  margin: 0;
  padding: 0;
}

// 1. 为不继承的元素设定继承父级行高
// 2. 为不继承的元素设定继承父级字体
input,
textarea,
button,
select,
pre,
xmp,
tt,
code,
kbd,
samp {
  line-height: inherit;
  font-family: inherit;
}

// 1. 为不继承的元素设定继承父级字号
h1,
h2,
h3,
h4,
h5,
h6,
small,
big,
input,
textarea,
button,
select {
  font-size: inherit;
}

// 1. 重置斜体表现为正常文本
address,
cite,
dfn,
em,
i,
optgroup,
var {
  font-style: normal;
}

// 1. 清除单元格边距并让边框合并
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  text-align: left;
}

// 1. 清除列表默认序号
ul,
ol,
menu {
  list-style: none;
}

// 1. 清除默认边框
// 2. 清除img底部留白问题，并使得默认居中
fieldset,
img {
  border: 0;
  vertical-align: middle;
}

// 1. 设置HTML5部分新增元素为块元素
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

// 1. 设置HTML5新增媒体元素与img, object保持一致
audio,
canvas,
video {
  display: inline-block;
}

// 1. 清除引用元素的默认派生标识
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "\0020";
}

// 1. 设置文本域和代码块在需要时出现滚动条
textarea,
pre,
xmp {
  overflow: auto;
}

// 1. 设置文本域滚可拖动改变垂直方向尺寸
textarea {
  resize: vertical;
}

// 1. 清除webkit下表单元素的outline
input,
textarea,
button,
select,
summary,
a {
  outline: 0 none;
}

//  使用webkit内核的浏览器
::-webkit-input-placeholder {
  color: #d1d1d1;
  font-size: 16px;
}

// 1. 让表单元素具有颜色继承
// 2. iOS上当禁用时会设置opacity: .4
input,
textarea,
button,
select {
  color: inherit;
  &:disabled {
    opacity: 1;
  }
}

// 1. 清除Firefox按钮内部边框和补白
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

// 1. 重置按钮的外观
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; // 1
  padding: 0; // 2
}

// 1. 清除 summary 的展开收起标识
::-webkit-details-marker {
  display: none;
}

// 1. 重置mark元素的默认背景色
mark {
  background-color: rgba(0, 0, 0, 0);
}

// 1. 清除文本线条装饰
a,
ins,
s,
u,
del {
  text-decoration: none;
}

// 1. 禁止长按链接与图片弹出菜单
// issues: 在iOS8.1下此设置对a仍无效
a,
img {
  -webkit-touch-callout: none;
}

// 1. 预设默认链接表现
a {
  color: #e00909;
}

// 1. fix Android Browser 4.2.* 及以下 input:checked ~ .xxx 失效的问题
html + input {
}
